<template>
	<view>
		<view class="positopbgc"></view>
		<u-sticky>
			<view class="dingbu" v-if="op!=1">
				<view class="" :style="{paddingTop:menutop+'rpx'}" style="padding-bottom: 30rpx;">
					<view class="sanshier zhonghei textcenter fonweight">首页</view>
				</view>
			</view>
		</u-sticky>
		<u-sticky bgColor="#fff" v-if="op==1">
			<view class="" :style="{paddingTop:menutop+'rpx'}" style="padding-bottom: 30rpx;">
				<view class="sanshier zhonghei textcenter fonweight">首页</view>
			</view>
		</u-sticky>
		<view class="mainpadding">
			<image class="beijt" src="@/static/images/system/bjc.png" mode=""></image>
			<u-swiper :list="list1" imgMode="widthFix" keyName="image_text" height="180" indicator circular
				@click="lbtclick($event,list1)"></u-swiper>
			<view class="mainpadding flexleft radius margin_top" style="background-color: #f9efe6;"
				@click="jumpurl('/pages_index/gonggao')">
				<view class="xiaocheng sanshier fonweight margin_right2">公告</view>
				<view class="line margin_right2"></view>
				<swiper class="" style="height: 40rpx;width: 70%;" circular autoplay vertical>
					<swiper-item v-for="item in text1" :key="item.id">
						<view class="yhxk xiaohei">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="mainpadding2">
			<!-- <view class="flexleft">
				<view class="line margin_right2" style="width: 12rpx;height: 40rpx;"></view>
				<view class="sanshier xiaohei fonweight">胆码开奖号推荐</view>
			</view> -->
			<view class="margin_top2">
				<u-tabs :list="tabslist" lineColor="#ff9341" @click="changetab" :activeStyle="{
					    color: '#000000',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#666666',
								fontWeight: '500',
					            transform: 'scale(1)'
					        }" itemStyle="height: 44px;"></u-tabs>
			</view>
			
			<view class="flexcolumn" v-if="list.data.length==0">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui margin_top main_size">暂无数据</view>
			</view>
			<view class="mainpadding_top flexleft ffffff radius" v-for="item in list.data" :key="item.id">
				<image :src="item.logo_text" class="listleftimg radius margin_right2" mode=""></image>
				<view class="" style="width: 100%;">
					<view class="titletext xiaohei">{{item.name}}</view>
					<view class="flexbetween margin_top" style="width: 100%;">
						<view class="xiaohong smalltext ">
							<text>￥</text>
							<text class="titletext fonweight">{{item.price}}</text>
						</view>
						<view class="listbuybtn" @click="jumpdetail(item)">立即购买</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				op: 0,
				statusBarHeight: 0,
				list1: [],
				text1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				menutop:80,
				tabslist: [],
				tabsid: 0,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			this.getbanner()
			this.getgonggao()
			this.init()
			this.categoryIndex()
			
		},
		onPageScroll(res) {
			let top = res.scrollTop
			let height = this.statusBarHeight
			if (top <= height) {
				this.op = Math.round(top / height * 100) / 100
			} else {
				this.op = 1
			}
		},
		methods: {
			changetab(e) {
				this.tabsid = e.id
				this.page = 1
				this.list.data = []
				this.init()
			},
			lbtclick(e, list) {
				console.log(e, list);
				if (list[e].url) {
					uni.navigateTo({
						url: list[e].url
					})
				}
			},
			jumpdetail(val){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url:"/pages_index/querendd?id="+val.id+"&price="+val.price
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/Dmkjcl/dmkjIndex', 'GET', {
					page: page || 1,
					limit: 12,
					dmkj_category_id:this.tabsid
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getgonggao() {
				httpRequest.request('/api/index/noticeIndex', 'GET', {
					page: 1,
					limit: 12,
				}, false, false, true).then(res => {
					this.text1 = res.data.data
				})
			},
			categoryIndex() {
				httpRequest.request('/api/index/categoryIndex', 'GET', {
				}, false, false, true).then(res => {
					let arr = res.data
					arr.unshift({
						name:"全部",
						id:0
					})
					this.tabslist = arr
				})
			},
			
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
		}
	}
</script>

<style>
	.positopbgc {
		height: 700rpx;
		width: 100%;
		background-image: url("https://solarmini.yuntaiqi.com/uploads/20240116/40bef5773149893a96c5181c20ced66a.png");
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: -1;
	}

	.beijt {
		width: 100%;
		height: 195rpx;
		position: absolute;
		top: -30rpx;
		left: 0;
	}
</style>